<template>
  <el-main>
    <div style="text-align: left">
      <span>考试地点管理</span>
      <br>
      <span>考试地点名称:</span>
      <el-input placeholder="考试地点名称" v-model="input1" style="width:200px;margin-right:20px"></el-input>

      <!--查询-->
      <el-button type="info" icon="el-icon-search" @click="select">查询</el-button>
      <!--添加按钮-->
      <el-button type="success" icon="el-icon-edit" @click="dialogVisible = true">新增</el-button>

      <!--添加模态框-->
      <el-dialog title="新增学生信息" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
        <span>新增学生信息</span>
        <br>
        <div class="addinput">
          <el-input placeholder="考试地点名称" v-model="addexamPlaceName" style="width: 300px"></el-input>
          <br>
          <el-input placeholder="考试地点地址" v-model="addexamPlaceAddr" style="width: 300px"></el-input>
          <br>
          <el-input placeholder="座位号" v-model="addexamSiteNumber" style="width: 300px"></el-input>
          <br>
          <el-input placeholder="考场号" v-model="addseatNumber" style="width: 300px"></el-input>
          <br>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add(), (dialogVisible = false)">确 定</el-button>
        </span>
      </el-dialog>

      <!--修改模态框-->
      <el-dialog title="修改学生信息" :visible.sync="updatadialogVisible" width="40%" :before-close="handleClose">
        <span>修改学生信息</span>
        <br />
        <div class="addinput">
          <el-input placeholder="考试地点名称" v-model="upexamPlaceName" style="width: 300px"></el-input>
          <br>
          <el-input placeholder="考试地点地址" v-model="upexamPlaceAddr" style="width: 300px"></el-input>
          <br>
          <el-input placeholder="座位号" v-model="upexamSiteNumber" style="width: 300px"></el-input>
          <br>
          <el-input placeholder="考场号" v-model="upseatNumber" style="width: 300px"></el-input>
          <br>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updatadialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="update(), (updatadialogVisible = false)">确 定</el-button>
        </span>
      </el-dialog>

    </div>



    <!-- 全查 -->
    <el-table :data="tableData">
      <el-table-column prop="examPlaceId" label="序号" width="140">
      </el-table-column>
      <el-table-column prop="examPlaceName" label="考试地点名称" width="140">
      </el-table-column>
      <el-table-column prop="examPlaceAddr" label="考试地点地址" width="120">
      </el-table-column>
      <el-table-column prop="examSiteNumber" label="考场号" width="140">
      </el-table-column>
      <el-table-column prop="seatNumber" label="座位号" width="140">
      </el-table-column>

      <el-table-column prop="address"> </el-table-column><!-- 空 -->

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="warning" @click="find(scope.row.pkId)">修改</el-button>
          <el-button type="danger" @click="del(scope.row.pkId)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row>
      <el-col style="text-align: right">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">

        </el-pagination>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  name: "ExamPlace",
  //页面自动加载，
  created: function () {
    this.select();
  },
  data() {
    return {
      //分页
      pageNum: 1, //默认当前页数
      pageSize: 5, //默认每页显示条数
      total: 0, //总数据条数

      input1: "",
      tableData: [],

      dialogVisible: false,
      addexamPlaceName: "",
      addexamPlaceAddr: "",
      addexamSiteNumber: "",
      addseatNumber: "",

      updatadialogVisible : false,
      uppkId : "",
      upexamPlaceName: "",
      upexamPlaceAddr: "",
      upexamSiteNumber: "",
      upseatNumber: "",
    };
  },
  props: {},
  methods: {
    // 获取当前页的数据信息
    //pageSize 默认每页显示条数改变时会触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.select(this.pageNum, this.pageSize); //console.log(`每页 ${val} 条`);
    }, //currentPage 默认当前页数改变时会触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.select(this.pageNum, this.pageSize); //console.log(`当前页: ${val}`);
    },

    //模态框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },

    select: function () {
      var that = this;
      this.$axios.post("/ExamPlace/quest", {
        examPlaceName: this.input1,

        //分页
        pageNum: that.pageNum,
        pageSize: that.pageSize,
      })
        .then(function (response) {
          that.tableData = response.data.data;
          that.total = response.data.pageInfo.total;
        })
    },
    add: function () {
      var that = this;
      this.$axios.post("/ExamPlace/save", {
        examPlaceName: that.addexamPlaceName,
        examPlaceAddr: that.addexamPlaceAddr,
        examSiteNumber: that.addexamSiteNumber,
        seatNumber: that.addseatNumber,
      })
        .then(function (response) {
          that.select(),
            that.$message({
              //弹出框
              message: "新增成功!",
              type: "success",
            });
        });
    },
    del: function (pkId) {
      var that = this;
      this.$axios.post("/ExamPlace/del", {
        pkId: pkId
      })
        .then(function (response) {
          that.select(),
            that.$message({
              //弹出框
              message: "删除成功!",
              type: "success",
            });
        });
    },
    find : function (pkId) {
      this.updatadialogVisible = true;
      var that = this;
      this.$axios.post("/ExamPlace/find", {
        pkId: pkId,
      })
      .then(function (response) {
          if (response.data.code == "3333") {
            that.upexamPlaceName = response.data.data.examPlaceName;
            that.upexamPlaceAddr = response.data.data.examPlaceAddr;
            that.upexamSiteNumber = response.data.data.examSiteNumber;
            that.upseatNumber = response.data.data.seatNumber;

            that.uppkId = response.data.data.pkId;
            that.select();
          }
        });
    },
    update : function(){
      var that = this;
      this.$axios.post("/ExamPlace/update",{
        pkId : that.uppkId,
        examPlaceName : that.upexamPlaceName,
        examPlaceAddr : that.upexamPlaceAddr,
        examSiteNumber : that.upexamSiteNumber,
        seatNumber : that.upseatNumber,
      })
      .then(function (response) {
        that.select();
      });
    }
  },
};
</script>

<style scoped></style>